<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>果蔬商城-水果网购首选品牌,只为一份极致的新鲜!</title>
    <link href="${path}/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="${path}/css/register-login/common.css" rel="stylesheet" type="text/css">
    <link href="${path}/css/register-login/style.css" rel="stylesheet" type="text/css">
    <link href="${path}/css/register-login/register.css" rel="stylesheet" type="text/css">
</head>
<body >
<!--引入导航begin-->
<%@ include file="../common/header.jsp" %>
<!--引入导航end-->
<!--注册开始-->
<div class="w-1000 w-750 pt-50">
    <p class="member">注册会员</p>
    <div class="login-sec clearfix">
        <div class="login-left pull-left">
            <img src="${path}/images/logo-2.png" height="80%" width="87%">
        </div>
        <div class="login-right pull-right">
            <div class="login-form">
                <form action="${path}/user/register" class="form-horizontal" role="form"，method="post" id="registerForm">
                    <input type="hidden" name="flag" value="true">
                    <ul>
                        <li class="clearfix">
                            <div class="text02 all pull-left ">
                                <span class="user">用户名</span>
                            </div>
                            <div class="send-yanzm pull-left ">
                                <input type="text" class="form-control" id="username" name="username"
                                  value="${u.username}"     placeholder="小写字母开头,不含中文.长度6-8位">
                                <span class="true"></span>
                            </div>

                        </li>

                        <li class="clearfix">
                            <div class="text04 all pull-left">
                                <span class="code">密码</span>
                            </div>
                            <div class="password pull-left">
                                <input type="password" placeholder="密码6-12位，不能为纯数字" minlength="6" maxlength="8"
                                  value="${u.password}"     class="form-control" id="password" name="password">
                                <span class="true"></span>
                            </div>

                        </li>

                        <li class="clearfix">
                            <div class="text05 all pull-left">
                                <span class="code">确认密码</span>
                            </div>
                            <div class="entrue pull-left">
                                <input type="password" placeholder="和密码保持一致" class="pull-left form-control" id="pwd"
                                       name="pwd">
                                <span class="true"></span>
                            </div>

                        </li>
                        <li class="clearfix">
                            <div class="text01 all pull-left">
                                <span class="mobile">手机号</span>
                            </div>
                            <div class="send-yanzm pull-left">
                                <input type="tel" class="form-control" id="tel" name="tel" value="${u.tel}" placeholder="合法手机格式">
                                <span class="true"></span>
                            </div>
                        </li>
                        <li class="clearfix">
                            <div class="text01 all pull-left">
                                <span class="email">注册邮箱</span>
                            </div>
                            <div class="send-yanzm pull-left">
                                <input type="email" class="form-control" id="email" name="email"  value="${u.email}" placeholder="合法邮箱格式">
                                <span class="true"></span>
                            </div>
                        </li>

                        <li class="clearfix">
                            <div class="fruit-login pull-right">
                                <div class="fr-regist pull-left">
                                    <%--<a href="javascript:void(0);" onclick="doReg();"  id="btn">注册</a>--%>
                                    <input type="button" class=" btn btn-success "  onclick="doRegister()" id="btn" value="注册"  style="width: 120px">
                                </div>
                                <div class="fr-regist pull-left">
                                    <input type="button" class="btn btn-success" value="登录 "  onclick="login()" style="width: 120px">
                                </div>
                            </div>
                        </li>
                    </ul>
                </form>
            </div>
        </div>
    </div>
</div>
<!--引入footer Begin-->
<%@ include file="../common/footer.jsp" %>
<!--引入footer  End-->
<!--冲突-->
<%--<script src="${path}/dist/js/jquery.min.js"></script>--%>
<script src="${path}/dist/js/bootstrap.min.js"></script>
<script src="${path}/js/register-login/wow.js"></script>
<script>
    //注册
    //1.获取需要验证的文本框.
    var username = document.getElementById("username");
    //2.获取密码验证的输入框
    var password = document.getElementById("password");
    //3.获取确认密码的输入框
    var pwd = document.getElementById("pwd");
    //4.获取邮箱的输入框
    var email = document.getElementById("email");
    //5.获取电话的输入框
    var tel = document.getElementById("tel");
    // 定义一个布尔类型的变量，用来标记所有的元素是否都符合条件
    // 全局变量，让checkData方法也能访问到，但是必须在doRegister()方法中重新初始化为true
    var flag = false;
    // 定义一个布尔类型的变量，用来标记用户名是否都符合条件
   var  flag1 = false;
    //把用户名输入框的onblur事件与注册按钮的单击事件分开写
    function doRegister() {
        flag = true;
        password.onblur();
        pwd.onblur();
        email.onblur();
        tel.onblur();
        // 让用户名最后一个验证，控制执行顺序，
        // 重新验证用户名，让用户名中的ajax回调函数去控制表单的提交
        // 验证username
        // 初始化flag1
        flag1 = false;
        // 获取文本输入框中的值
        var value = document.getElementById("username").value;
        // 创建正则表达式对象
        var reg = /^[a-z][a-zA-Z0-9]{5,7}$/;
        if (!reg.test(value)) {
            username.parentNode.parentNode.className = "send-yanzm pull-left has-error";
            flag1 = false;
            return;
        }
        // 1.//1.创建XMLHttpRequest对象
        var xmlHttp = new XMLHttpRequest();
        // 2.注册一个回调函数
        xmlHttp.onreadystatechange = function() {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                // 获取后台返回的信号量.
                var str = xmlHttp.responseText;
                // 进行判断
                if (str == "1") {//用户名可用
                    flag1 = true;

                } else {
                    flag1 = false;

                }
                /*alert("flag1:"+flag1);
                alert("flag:"+flag);
                alert("flag&flag1:"+flag&&flag1);*/
                //如果全部符合条件，则提交表单
                if(flag && flag1){
                    document.forms["registerForm"].submit();
                }
            }
        }
        // 3.设置请求参数
        xmlHttp.open("post", "${path}/user/register", true);
        // post请求,需要设置header头信息
        xmlHttp.setRequestHeader("Content-Type",
            "application/x-www-form-urlencoded");
        // 4.发送请求
        xmlHttp.send("username=" + value);
    }

    // 绑定onblur事件
    function initOnblur() {
        // 验证username
        username.onblur = function() {
            // 初始化flag1
            flag1 = false;

            this.onfocus = function() {
              //  span.style.display = "none";
                this.parentNode.className = "send-yanzm pull-left"
            }
            // 获取文本输入框中的值
            var value = document.getElementById("username").value;
            // 创建正则表达式对象
            var reg = /^[a-z][a-zA-Z0-9]{5,7}$/;
            if (!reg.test(value)) {
                this.parentNode.className = "send-yanzm pull-left has-error";
                flag1 = false;
                return;
            }
            // 1.//1.创建XMLHttpRequest对象
            var xmlHttp = new XMLHttpRequest();
            // 2.注册一个回调函数
            xmlHttp.onreadystatechange = function() {
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    // 获取后台返回的信号量.
                    var str = xmlHttp.responseText;
                    // 进行判断
                    if (str == "1") {//用户名可用
                        flag1 = true;

                    } else {
                        flag1 = false;

                    }
                }
            }
            // 3.设置请求参数
            xmlHttp.open("post", "${path}/user/register", true);
            // post请求,需要设置header头信息
            xmlHttp.setRequestHeader("Content-Type",
                "application/x-www-form-urlencoded");
            // 4.发送请求
            xmlHttp.send("username=" + value);
        }
        // username end...

        // 验证密码
        checkData(password, "*密码长度在6-12", /^[A-Za-z0-9_-]{6,12}$/);

        // 验证密码是否一致
        pwd.onblur = function() {
            // 文本输入框添加onfocus事件
            this.onfocus = function() {
                this.parentNode.className = "send-yanzm pull-left"
            }
            if (this.value != null && this.value.trim().length > 0
                && this.value == password.value) {

            } else {
                flag = false;
            }
        }

        // 验证邮箱
        // 邮箱不能以 - _ .以及其它特殊字符开头和结束
        // 邮箱域名结尾为2~5个字母，比如cn、com、name
        checkData(email, "*请输入合法的邮箱格式",
            /^[a-zA-Z_0-9]{1,}@(([a-zA-z0-9]-*){1,}\.){1,3}[a-zA-z\-]{1,}$/);

        // 验证手机号
        checkData(tel, "*请输入合法的手机格式", /^1[34578]\d{9}$/);
    }

    // 定义一个函数,用来检测数据
    // obj代表各个需要验证的输入框
    // info代表span错误时需要显示的内容.
    // fun - 闭包函数
    function checkData(obj, info, reg) {
        // 各个文本输入框添加onfocus事件
        obj.onfocus = function() {
            this.parentNode.className = "send-yanzm pull-left"
        }
        // 添加需要验证的文本输入框的onblur事件
        obj.onblur = function() {// 为了修改span样式
            // 先获取文本输入框中的内容
            var text = this.value;
            // 每个验证的regex是不一样的.
            if (reg.test(text)) {
                // 成功...
                this.parentNode.className = "send-yanzm pull-left has-success"
                // span.innerHTML = "√";
                // span.className = "success";
            } else {
                // 不成功..
                flag = false;
                // 显示错误提示
                this.parentNode.className = "send-yanzm pull-left has-error"
            }
        }
    }
    // 给表单中的元素绑定onfocus和onblur事件
    initOnblur();

    //登陆按钮调到登陆界面
    function  login(){
        window.location="${path}/user/loginView";
    }
</script>



</body>
</html>
